<template>
  <!-- 通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，
第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。 -->
  <div class="schoo-page">
    郑东新区<el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select
    >学校午餐配送qing'kuang日报表
    <br />
    填表人员: 日期:
    <div class="table-block">
      <el-table :data="nj">
        <!-- <el-table-column prop="date" label="六年级" width="150"> </el-table-column> -->
        <el-table-column label="年级">
          <el-table-column prop="sort" label="序号"> </el-table-column>
        </el-table-column>
      </el-table>
      <el-table :data="five">
        <!-- <el-table-column prop="date" label="六年级" width="150"> </el-table-column> -->
        <el-table-column label="5年级">
          <el-table-column prop="classPart" label="班级"> </el-table-column>
          <el-table-column prop="eatnum" label="人数"> </el-table-column>
        </el-table-column>
      </el-table>

      <el-table :data="sex">
        <!-- <el-table-column prop="date" label="六年级" width="150"> </el-table-column> -->
        <el-table-column label="6年级">
          <el-table-column prop="classPart" label="班级"> </el-table-column>
          <el-table-column prop="eatnum" label="人数"> </el-table-column>
        </el-table-column>
      </el-table>
      <el-table :data="four">
        <!-- <el-table-column prop="date" label="六年级" width="150"> </el-table-column> -->
        <el-table-column label="4年级">
          <el-table-column prop="classPart" label="班级"> </el-table-column>
          <el-table-column prop="eatnum" label="人数"> </el-table-column>
        </el-table-column>
      </el-table>
    </div>

    <h2>yyyyyyyyyyyyyyyyyy</h2>
    <!-- 体温 -->
    <el-table border :span-method="objectSpanMethod" :data="edata">
      <!-- <el-table-column prop="date" label="六年级" width="150"> </el-table-column> -->
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="schoolname" label="配餐学校"> </el-table-column>
      <el-table-column prop="arriveDate" label="车辆进校时间"> </el-table-column>
      <el-table-column prop="carno" label="车牌号"> </el-table-column>
      <el-table-column prop="follower" label="随车人员"> </el-table-column>
      <el-table-column prop="ishealth" label="随车人员健康状况"> </el-table-column>
      <el-table-column prop="temperature" label="随车人员体温"> </el-table-column>
      <el-table-column prop="leadName" label="企业带班领导"> </el-table-column>
      <el-table-column prop="totalnum" label="就餐学生人数"> </el-table-column>
      <el-table-column prop="remnantFood" label="就餐职工人数"> </el-table-column>
      <el-table-column prop="qingjia" label="学生请假人数"> </el-table-column>
      <el-table-column prop="eatnum" label="存在问题"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import edata from './sdata.json'

export default {
  // 组件名称
  name: 'School',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      edata,
      nj: [
        {
          sort: 1
        },
        {
          sort: 2
        },
        {
          sort: 3
        }
      ],
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: '',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      five: [
        {
          level: 5,
          levelName: '小学五年级',
          classPart: 2,
          eatnum: 33
        }
      ],
      sex: [
        {
          level: 6,
          levelName: '小学6年级',
          classPart: 1,
          eatnum: 44
        }
      ],
      four: [
        {
          level: 4,
          levelName: '小学4年级',
          classPart: 1,
          eatnum: 55
        }
      ]
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    console.log(edata)
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row)
      // var arr = this.edata
      if (rowIndex === 1) {
        return {
          rowspan: 2,
          colspan: 0
        }
        // for (var i = 0; i < arr.length; i++) {
        //   if (arr[i].schoolname == arr[i + 1].schoolname) {
        //     return {
        //       rowspan: 2,
        //       colspan: 0
        //     }
        //   } else {
        //     return {
        //       rowspan: 0,
        //       colspan: 0
        //     }
        //   }
        // }
      } else {
        // return {
        //   rowspan: 0,
        //   colspan: 0
        // }
      }
    }
    // colspan是一个合成词:column(列)+span(跨度).表示跨几个列合并单元格。
    /* 通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，
第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。 */
    //   objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    //     if (columnIndex === 0) {
    //       return {
    //         rowspan: 7,
    //         colspan: 0
    //       }
    //       // if (rowIndex % 2 === 0) {
    //       //   return {
    //       //     rowspan: 2,
    //       //     colspan: 1
    //       //   }
    //       // } else {
    //       //   return {
    //       //     rowspan: 0,
    //       //     colspan: 0
    //       //   }
    //       // }
    //     }
    //   }
  }
}
</script>

<style scoped lang="less">
.schoo-page {
  padding: 10px;
  .table-block {
    display: flex;
    .el-table {
      width: unset;
    }
  }
}
</style>
